<!-- 内容中心面包屑 -->
---
// home 图标
const homeSvg = `
  <svg t="1737274001357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21949" width="100%" height="100%">
    <path d="M1011.017143 560.091429L556.8 24.685714a57.6 57.6 0 0 0-89.6 0L12.982857 560.091429a57.6 57.6 0 0 0 44.8 93.805714c31.817143 0 77.348571 25.782857 77.348572 57.6v251.611428a57.6 57.6 0 0 0 57.6 57.6h102.948571a57.6 57.6 0 0 0 57.6-57.6v-171.154285a57.6 57.6 0 0 1 57.6-57.6h202.24a57.6 57.6 0 0 1 57.6 57.6v171.154285a57.6 57.6 0 0 0 57.6 57.6h102.948571a57.6 57.6 0 0 0 57.6-57.6V711.497143c0-31.817143 45.531429-57.6 77.348572-57.6a57.6 57.6 0 0 0 44.8-93.805714z" fill="currentColor" p-id="21950"></path>
  </svg>
`
interface Props {
  crumbs: { text: string; href: string }[]
}

const { crumbs } = Astro.props
---

<section class="breadcrumb-body">
  <div class="flex">
    {
      crumbs.map((crumb, index) => (
        crumb.href === '#' ?
          // 如果是 # 链接，则使用 div 渲染，否则使用 a 渲染
          <div class="block text-base"><span class="mx-2 text-[#999]">/</span>{crumb.text}</div> :
          <a href={crumb.href} class="block text-base hover:text-primary-hover">
            {
              index === 0
                ? <span class="block w-4 h-4" set:html={homeSvg}></span>
                : <span class:list={[{ 'text-primary': index === crumbs.length - 1 }]} ><span class="mx-2 text-[#999]">/</span>{crumb.text}</span>
            }
          </a>
      ))
    }
  </div>
</section>